:any-link
:any-link lets you to use the proposed :any-link
pseudo-class in CSS.
:any-link
simplifies selectors targeting links, as the naming of :link
is misleading; it specifically means unvisited links only, rather than all links.
nav :any-link > span {
background-color: yellow;
}
nav :link > span, nav :visited > span {
background-color: yellow;
}
From the proposal:
The :any-link
pseudo-class represents an element that acts as the source anchor of a hyperlink. It matches an element if the element would match :link
or :visited
.
Usage
Add :any-link to your build tool:
npm install postcss-pseudo-class-any-link --save-dev
Node
Use :any-link to process your CSS:
require('postcss-pseudo-class-any-link').process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use :any-link as a plugin:
postcss([
require('postcss-pseudo-class-any-link')()
]).process(YOUR_CSS);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use :any-link in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-pseudo-class-any-link')()
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use :any-link in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-pseudo-class-any-link')()
]
},
dist: {
src: '*.css'
}
}
});
Alternatives
Here are a few other ways to simulate the effect of [PostCSS Pseudo-Class Any-Link].
@custom-selector :--any-link :link, :visited;
:--any-link { }
:matches(:link, :visited) { }
:link, :visited { }